<template>
  <div class="BgContainer">
    <header class="TopHeader">
      <div>
        <img class="logo" src="@/assets/images/logo.login1.png" /><span>找人才，从此变得容易</span>
      </div>
      <p>
        <a href="javascript:;">用户登录</a>
      </p>
    </header>
    <div class="content">
      <img  src="@/assets/images/bgCreateAccount.png" class="bgbanner"/>
      <div class="contentFrom">
        <img src="@/assets/images/leftTag.png" alt="">
        <div class="form">
          <slot></slot>
        </div>
      </div>
    </div>
    <footer>
      <div>@版权所有 2008-2020 图谱天下(北京)科技有限公司 <a href="https://beta.tupu360.com/privacy.html">隐私政策</a></div>
      <div class="fl">
        <div>客服QQ：1851352120 Tel：400-000-9299</div>
        <div>
          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102002014">
            <img src="https://cdn.betacareersite.tupu360.com/csresources/OWmanager/images/beian.png" alt="">
          </a>
          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102002014">京公网安备 11010102002014号</a> | <a href="http://beian.miit.gov.cn">京ICP备11030964号</a> | <span>京ICP证110999号</span>
        </div>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  name: 'BgContainer',
  data () {
    return {
      form: this.$form.createForm(this)
      // bgCreateAccount.jpg
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.BgContainer
  height 100%
  width 100%
  display flex
  flex-direction column
  background #fff
  .content
    flex 1
    display flex
    flex-direction column
    justify-content flex-start
    align-items center
    .bgbanner
      width 100%
    .contentFrom
      margin-top -2%
      width: 100%;
      overflow: auto;
      flex 1
      display flex
      justify-content center
      align-items flex-start
      img
        width 475px
        height auto
        padding-right 48px
      .form
        border-left 1px solid borderColor
        padding-left 48px
  .TopHeader
    width 100%
    display flex
    justify-content space-around
    align-items center
    flex-wrap wrap
    >p
      a
        color var(--blue-500)
        font-size 18px
        border-bottom 1px solid var(--blue-500)
        padding-bottom 12px
    >div
      padding 10px 0
      margin 12px 0
      .logo
        padding 0 12px
        max-width 200px
        vertical-align middle
      span
        vertical-align middle
        color aaaGrey
        &:before
          margin-right 12px
          vertical-align middle
          content ''
          display inline-block
          width 1px
          height 18px
          background borderColor
  footer
    font-size 12px
    line-height 24px
    padding 25px
    display flex
    flex-direction column
    align-items center
    justify-content center
    background footerColor
    a
      color #555
    .fl
      display flex
      justify-content center
      align-items center
      >div
        padding 0 2em
</style>
